# 五子棋游戏 HTML 实现

以下是一个完整的五子棋游戏 HTML 实现，所有代码都在一个文件中：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f5f5dc;
            margin: 0;
            padding: 20px;
        }
        
        h1 {
            color: #8b4513;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        .game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
        }
        
        .board {
            display: grid;
            grid-template-columns: repeat(15, 30px);
            grid-template-rows: repeat(15, 30px);
            background-color: #deb887;
            border: 2px solid #8b4513;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            position: relative;
        }
        
        .cell {
            width: 30px;
            height: 30px;
            box-sizing: border-box;
            position: relative;
            cursor: pointer;
        }
        
        .cell::before, .cell::after {
            content: '';
            position: absolute;
            background-color: #000;
        }
        
        .cell::before {
            width: 100%;
            height: 1px;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        
        .cell::after {
            width: 1px;
            height: 100%;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
        }
        
        .cell.black::before, .cell.black::after {
            display: none;
        }
        
        .stone {
            position: absolute;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            z-index: 1;
        }
        
        .black-stone {
            background: radial-gradient(circle at 30% 30%, #666, #000);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        }
        
        .white-stone {
            background: radial-gradient(circle at 30% 30%, #fff, #ccc);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        .controls {
            margin-top: 20px;
            display: flex;
            gap: 20px;
        }
        
        button {
            padding: 8px 16px;
            background-color: #8b4513;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #a0522d;
        }
        
        .status {
            margin-top: 15px;
            font-size: 18px;
            font-weight: bold;
            color: #8b4513;
            height: 24px;
        }
        
        .star-point {
            position: absolute;
            width: 6px;
            height: 6px;
            background-color: #000;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <h1>五子棋游戏</h1>
    
    <div class="game-container">
        <div class="status" id="status">黑方回合</div>
        <div class="board" id="board"></div>
        <div class="controls">
            <button id="restart">重新开始</button>
            <button id="undo">悔棋</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const BOARD_SIZE = 15;
            const boardElement = document.getElementById('board');
            const statusElement = document.getElementById('status');
            const restartButton = document.getElementById('restart');
            const undoButton = document.getElementById('undo');
            
            let board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
            let currentPlayer = 1; // 1 为黑棋，2 为白棋
            let gameOver = false;
            let moveHistory = [];
            
            // 初始化棋盘
            function initBoard() {
                boardElement.innerHTML = '';
                
                // 创建棋盘格子
                for (let i = 0; i < BOARD_SIZE; i++) {
                    for (let j = 0; j < BOARD_SIZE; j++) {
                        const cell = document.createElement('div');
                        cell.className = 'cell';
                        cell.dataset.row = i;
                        cell.dataset.col = j;
                        cell.addEventListener('click', handleCellClick);
                        boardElement.appendChild(cell);
                    }
                }
                
                // 添加星位点
                const starPoints = [
                    [3, 3], [3, 11], [3, 7],
                    [7, 3], [7, 11], [7, 7],
                    [11, 3], [11, 11], [11, 7]
                ];
                
                starPoints.forEach(([row, col]) => {
                    const starPoint = document.createElement('div');
                    starPoint.className = 'star-point';
                    starPoint.style.left = `${col * 30 + 15}px`;
                    starPoint.style.top = `${row * 30 + 15}px`;
                    boardElement.appendChild(starPoint);
                });
            }
            
            // 处理格子点击
            function handleCellClick(e) {
                if (gameOver) return;
                
                const row = parseInt(e.target.dataset.row);
                const col = parseInt(e.target.dataset.col);
                
                if (board[row][col] !== 0) return;
                
                // 放置棋子
                board[row][col] = currentPlayer;
                moveHistory.push({row, col, player: currentPlayer});
                
                // 渲染棋子
                const stone = document.createElement('div');
                stone.className = `stone ${currentPlayer === 1 ? 'black-stone' : 'white-stone'}`;
                e.target.appendChild(stone);
                
                // 检查胜利
                if (checkWin(row, col)) {
                    gameOver = true;
                    statusElement.textContent = `${currentPlayer === 1 ? '黑方' : '白方'}获胜！`;
                    return;
                }
                
                // 切换玩家
                currentPlayer = currentPlayer === 1 ? 2 : 1;
                statusElement.textContent = `${currentPlayer === 1 ? '黑方' : '白方'}回合`;
            }
            
            // 检查是否获胜
            function checkWin(row, col) {
                const directions = [
                    [0, 1],   // 水平
                    [1, 0],   // 垂直
                    [1, 1],   // 对角线
                    [1, -1]   // 反对角线
                ];
                
                const player = board[row][col];
                
                for (const [dx, dy] of directions) {
                    let count = 1;
                    
                    // 正向检查
                    for (let i = 1; i <= 4; i++) {
                        const newRow = row + i * dx;
                        const newCol = col + i * dy;
                        
                        if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE || board[newRow][newCol] !== player) {
                            break;
                        }
                        count++;
                    }
                    
                    // 反向检查
                    for (let i = 1; i <= 4; i++) {
                        const newRow = row - i * dx;
                        const newCol = col - i * dy;
                        
                        if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE || board[newRow][newCol] !== player) {
                            break;
                        }
                        count++;
                    }
                    
                    if (count >= 5) {
                        return true;
                    }
                }
                
                return false;
            }
            
            // 重新开始游戏
            function restartGame() {
                board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
                currentPlayer = 1;
                gameOver = false;
                moveHistory = [];
                statusElement.textContent = '黑方回合';
                initBoard();
            }
            
            // 悔棋
            function undoMove() {
                if (gameOver || moveHistory.length === 0) return;
                
                const lastMove = moveHistory.pop();
                board[lastMove.row][lastMove.col] = 0;
                
                // 移除棋子
                const cell = document.querySelector(`.cell[data-row="${lastMove.row}"][data-col="${lastMove.col}"]`);
                cell.innerHTML = '';
                
                // 切换回上一个玩家
                currentPlayer = lastMove.player;
                statusElement.textContent = `${currentPlayer === 1 ? '黑方' : '白方'}回合`;
            }
            
            // 事件监听
            restartButton.addEventListener('click', restartGame);
            undoButton.addEventListener('click', undoMove);
            
            // 初始化游戏
            initBoard();
        });
    </script>
</body>
</html>
```

## 游戏功能说明

1. **基本规则**：
   - 标准15×15五子棋棋盘
   - 黑方先行，轮流落子
   - 先形成五子连线者获胜

2. **游戏功能**：
   - 点击棋盘格子放置棋子
   - 自动判断胜负
   - 重新开始按钮
   - 悔棋功能

3. **界面特点**：
   - 木质风格的棋盘
   - 黑白棋子有立体效果
   - 清晰的回合提示
   - 棋盘上有标准星位标记

您可以将此代码保存为HTML文件，然后在浏览器中打开即可开始游戏。游戏完全自包含，不需要任何外部资源。